<template>
    <!-- 轮询消息 -->
    <transition name="fade">
        <div id="Polling" v-if="show">{{ websockData }}</div>
    </transition>
</template>

<script>
    import api from '@/utils/api';

    export default {
        name: "marquee-tips",
        data() {
            return {
                websock: null,
                websockData: '',
                show: false
            }
        },
        created() {
            this.polling()
        },
        beforeDestroy() {
            this.websock.close();
        },
        methods: {
            polling() {
                var that = this;
                let websock = new WebSocket("wss://socket.renqidaren.com:2346");
                websock.onopen = function() {

                };
                websock.onmessage = function(e) {
                    that.websockData = e.data
                };
                this.websock = websock;
            }
        },
        watch: {
            websockData(val) {
                this.show = true
                setTimeout(() => {
                    this.show = false
                },2000)
            }
        }
    }
</script>

<style scoped>
    /*#Polling {*/
        /*background: rgba(0, 0, 0, .5);*/
        /*position: fixed;*/
        /*top: 1rem;*/
        /*left: 0;*/
        /*padding: .1rem .3rem;*/
        /*border-top-right-radius: .4rem;*/
        /*border-bottom-right-radius: .4rem;*/
        /*color: #fff;*/
        /*z-index: 9999;*/
    /*}*/

    #Polling {
        background: rgba(0, 0, 0, .7);
        position: fixed;
        top: 1rem;
        left: .1rem;
        padding: .1rem .3rem;
        border-radius: .2rem;
        color: #fff;
        z-index: 9999;
        font-weight: 600;
        font-size: .4rem;

    }

    .fade-enter-active, .fade-leave-active {
        transition: opacity 1s;
    }

    .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */
    {
        opacity: 0;
    }
</style>
